<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员信息页</title>
<!-- 下载并引入jquery easyUI -->
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/color.css">
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>


</head>
<body>
	<!-- 数据列表  start -->
	<!-- 在页面中使用easy ui组件进行界面编程 ,数据表格组件 -->
	<table id="users_dg" title="用户列表" class="easyui-datagrid"
		style="width: 100%; height: 100%"
		url="../json/userslist.json"
		toolbar="#users_toolbar" pagination="true" rownumbers="true"
		fitColumns="true" singleSelect="true"  data-options="fit:true"  >
		<thead>
			<tr>
				<th field="cb" checkbox="true" align="center"></th>
				<!--  field字段需要与返回数据的属性名一致 -->
				<th field="id" align="center">管理员编号</th>
				<th field="role" formatter="roleFormatter" width="50">角色</th>
				<th field="name" width="50">姓名</th>
				<th field="password" formatter="passwordFormatter" width="50">密码</th>
				<th field="age" width="50">年龄</th>
				<th field="phone" width="50">电话</th>
				<th field="email" width="50">邮箱</th>
				<th field="regDate" width="50">注册日期</th>
				<th field="headImage" formatter="imageFormatter" width="100">用户头像</th>

			</tr>
		</thead>
	</table>
	<!-- 工具条组件 -->
	<div id="users_toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="newUsers()">新增</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editUsers()">修改</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroyUsers()">删除</a>

		<form action="../../sys/users/export"
			id="download_form" method="post" style="display: inline;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick="exportData()">导出数据</a>
		</form>
	</div>
	<!-- 数据列表 end  -->


	<!-- 新增和修改表单  start -->
	<div id="users_dlg" class="easyui-dialog"
		style="width: 400px; height: 350px; padding: 10px 20px" closed="true"
		buttons="#users_dlg-buttons">
		<div class="ftitle">用户信息管理</div>
		<form id="users_fm" enctype="multipart/form-data" method="post">
			<div class="fitem">
				<label>账号:</label> <input id='username' name="name"
					style="width: 260px;" height: 280px; prompt="username"
					data-options="iconCls:'icon-man'" class="easyui-textbox"
					required="true">
			</div>
			<div class="fitem">
				<label>密码:</label> <input id="passwordiip" name="password" style="width: 260px;"
					class="easyui-passwordbox " data-options="iconCls:'icon-lock'"
					prompt="password" required="true">
			</div>
			<div class="fitem">
				<label>年龄:</label> <input name="age" style="width: 260px;"
					class="easyui-numberbox " prompt="1~150"
					data-options="min:1,max:150,precision:0">
			</div>
			<div class="fitem">
				<label>电话:</label> <input name="phone" style="width: 260px;"
					class="easyui-textbox " prompt="手机或固定电话">
			</div>
			<div class="fitem">
				<label>邮箱:</label> <input name="email" style="width: 260px;"
					class="easyui-textbox " prompt="XXX@xxx.xx">
			</div>
			<div class="fitem">
				<label>头像:</label> <input name="imageFile" style="width: 260px;"
					class="easyui-filebox">
			</div>

			<div class="fitem">
				<label>角色:</label> <input id="roleid" class="easyui-combobox" required="true"
					name="role.id"
					data-options="valueField:'id',textField:'name',url:'../json/roleselectlist.json'">
			</div>


		</form>
	</div>
	<div id="users_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveUsers()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#users_dlg').dialog('close')">取消</a>
	</div>
	<!-- 新增和修改表单 end -->
	<script type="text/javascript">
		//下拉列表反选的方法
		function loadRoleSuccess(roleid) {
			var data = $("#roleid").combobox("getData");
			if (data && data.length > 0) {
				if (roleid == 0) {
					$("#roleid").combobox("setValue", data[0].id);
				} else {
					$("#roleid").combobox("setValue", roleid);
				}
			}
		}

		function newUsers() {
			$('#users_dlg').dialog('open').dialog('setTitle', '新增用户');
			$('#users_fm').form('clear');
			url = '../../sys/users/add';
			$('#username').textbox('readonly', false);
			loadRoleSuccess(0);
		}

		function editUsers() {
			$('#users_fm').form('clear');
			var row = $('#users_dg').datagrid('getSelected');
			if (row) {
				$('#users_dlg').dialog('open').dialog('setTitle', '修改用户');
				$('#users_fm').form('load', row);
				url = '../../sys/users/edit?id='
						+ row.id;
				//用户账号不能修改
				$('#username').textbox('readonly', true);
				$('#passwordiip').textbox({disabled:false});
				loadRoleSuccess(row.role.id);
			} else {
				$.messager.show({
					title : 'Info',
					timeout : 2000,
					msg : '请选择一条记录！'
				});
			}
		}

		function saveUsers() {
			$('#users_fm').form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(result) {
					var result = eval('(' + result + ')');
					if (!result.success) {
						$.messager.show({
							title : 'Error',
							timeout : 2000,
							msg : result.errorMsg
						});
					} else {
						$.messager.show({
							title : 'Info',
							timeout : 2000,
							msg : result.errorMsg
						});
					}

					$('#users_dlg').dialog('close'); // close the dialog
					$('#users_dg').datagrid('reload'); // reload the user data
				}
			});
		}

		function destroyUsers() {
			var row = $('#users_dg').datagrid('getSelected');
			if (row) {
				$.messager
						.confirm(
								'Confirm',
								'确认删除用户信息?删除后数据不能回滚！',
								function(r) {
									if (r) {
										$
												.post(
														'../../sys/users/delete',
														{
															id : row.id
														},
														function(result) {
															if (result.success) {
																$('#users_dg')
																		.datagrid(
																				'reload'); // reload the user data
															} else {
																$.messager
																		.show({ // show error message
																			title : 'Error',
																			timeout : 2000,
																			msg : result.errorMsg
																		});
															}
														}, 'json');
									}
								});
			} else {
				$.messager.show({
					title : 'Info',
					timeout : 2000,
					msg : '请选择一条记录！'
				});
			}
		}

		//图片可以使用格式化器展示图片
		function imageFormatter(value, row, index) {
			return "<img  width='60' src='../"+value+"'>";
		}

		//多表关联查询的数据需要使用格式化器指定要显示的数据
		function roleFormatter(value, row, index) {
			if (value) {
				return value.name;
			} else {
				return "未指派";
			}

		}

		//在页面隐藏密码不直接显示
		function passwordFormatter(value, row, index) {
			return "******";
		}

		function exportData() {
			$("#download_form").submit();
		}
	</script>
</body>
</html>